<template>
  <div>
    <div class="user-area">
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>角色名</span>
          </div>
        </el-col>
        <el-col :span="7">
          <el-input v-if="!isInfo"
                    v-model="roleInfo.roleName"
                    size="small"></el-input>
          <span v-else>{{ roleInfo.roleName }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>操作权限</span>
          </div>
        </el-col>
        <el-col :span="20"
                style="margin-top:17px;">
          <el-checkbox-group v-if="!isInfo"
                             v-model="buttonAuthorityList">
            <el-checkbox v-for="(item, key) in allAuthority.buttonAuthority"
                         :key="key"
                         :label="item.value">{{item.name}}</el-checkbox>
          </el-checkbox-group>
          <template v-else>
            <span>{{ roleInfo.buttonAuthorityShow | joinArray(roleInfo.buttonAuthorityShow) }}</span>
          </template>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>可查看页面权限</span>
          </div>
        </el-col>
        <el-col :span="20"
                style="margin-top:17px;">
          <el-checkbox-group v-if="!isInfo"
                             v-model="pageRouteList">
            <el-checkbox v-for="(item, key) in allAuthority.pageRoute"
                         :key="key"
                         :label="item.value">{{item.name}}</el-checkbox>
          </el-checkbox-group>
          <template v-else>
            <span>{{ roleInfo.pageRouteShow | joinArray(roleInfo.pageRouteShow) }}</span>
          </template>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>可查看订单数据</span>
          </div>
        </el-col>
        <el-col :span="20"
                style="margin-top:17px;">
          <el-checkbox-group v-if="!isInfo"
                             v-model="orderHeadList">
            <el-checkbox v-for="(item, key) in allAuthority.orderHead"
                         :key="key"
                         :label="item.value">{{item.name}}</el-checkbox>
          </el-checkbox-group>
          <template v-else>
            <span>{{ roleInfo.orderHeadShow | joinArray(roleInfo.orderHeadShow) }}</span>
          </template>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>可查看货物数据</span>
          </div>
        </el-col>
        <el-col :span="20"
                style="margin-top:17px;">
          <el-checkbox-group v-if="!isInfo"
                             v-model="childOrderHeadList">
            <el-checkbox v-for="(item, key) in allAuthority.childOrderHead"
                         :key="key"
                         :label="item.value">{{item.name}}</el-checkbox>
          </el-checkbox-group>
          <template v-else>
            <span>{{ roleInfo.childOrderHeadShow | joinArray(roleInfo.childOrderHeadShow) }}</span>
          </template>
        </el-col>
      </el-row>
      <div v-if="!isInfo"
           class="foot">
        <el-button @click="setRole"
                   type="primary">确定</el-button>
        <el-button @click="() => {this.$router.go(-1)}"
                   type="primary">取消</el-button>
      </div>
      <div v-else
           class="foot">
        <el-button @click="() => {this.$router.go(-1)}"
                   type="primary">确定</el-button>
      </div>
    </div>
  </div>
</template>

<style>
</style>

<script>
import '@/style/info.scss'
import { api } from '@/api'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'
import { validatenull } from '@/utils/validate'
import { joinArray } from '@/utils/filters'

export default {
  data() {
    return {
      isInfo: this.infoFlag === '1',
      buttonAuthorityList: [],
      pageRouteList: [],
      orderHeadList: [],
      childOrderHeadList: [],
      roleInfo: {},
      allAuthority: {
        buttonAuthority: [],
        pageRoute: [],
        orderHead: [],
        childOrderHead: []
      }
    }
  },
  components: {
  },
  props: [
    'roleId', 'infoFlag'
  ],
  computed: {
  },
  activated() {
    this.getAllAuthority()
    this.getRoleDetail()
  },
  methods: {
    joinArray,
    getAllAuthority() {
      this.$http.get(api.ROLE_ALL_PERMISSION).then(
        res => {
          if (res.error.code === HTTPSUCCESS) {
            this.allAuthority = res.result
          }
        }
      )
    },
    getRoleDetail() {
      if (this.roleId) {
        this.$http.get(api.ROLE_DETAIL, { id: this.roleId }).then(
          res => {
            if (res.error.code === HTTPSUCCESS) {
              this.roleInfo = res.result
              console.log(this.roleInfo)
              this.buttonAuthorityList = res.result.buttonAuthority
              this.pageRouteList = res.result.pageRoute
              this.orderHeadList = res.result.orderHead
              this.childOrderHeadList = res.result.childOrderHead
            }
          }
        )
      }
    },
    setRole() {
      if (validatenull(this.roleInfo.roleName)) return this.$msg._message('请填写角色名', 'warning')
      if (validatenull(this.buttonAuthorityList)) return this.$msg._message('请勾选操作权限', 'warning')
      if (validatenull(this.pageRouteList)) return this.$msg._message('请勾选可查看页面权限', 'warning')
      if (validatenull(this.orderHeadList)) return this.$msg._message('请勾选可查看订单数据', 'warning')
      if (validatenull(this.childOrderHeadList)) return this.$msg._message('请勾选可查看货物数据', 'warning')
      const params = {
        roleId: this.roleId,
        roleName: this.roleInfo.roleName,
        pageRoute: this.pageRouteList,
        buttonAuthority: this.buttonAuthorityList,
        orderHead: this.orderHeadList,
        childOrderHead: this.childOrderHeadList
      }
      console.log('11111', params)
      this.$http.post(api.ROLE_EDIT, params).then(
        res => {
          if (res.error.code === HTTPSUCCESS) {
            this.$msg._message('操作成功！', 'success')
            this.$router.push({ name: 'role' })
          } else {
            this.$msg._message(res.error.message, 'error')
          }
        }
      )
    }
  }
}
</script>
